<template>
<div>
  <p>msg.content = {{msg.content}}</p>
  <button @click="changeRaw">changeRaw</button>
  <button @click="changeMsg">changeMsg</button>
</div>
</template>

<script>
import { reactive, toRaw } from 'vue'
export default {
  name: 'App',
  setup() {
    let msg = reactive({
      content: 'content'
    });

    let raw = toRaw(msg);

    console.log(raw);

    function changeMsg() {
      msg.content = 'changedMsg'
      console.log(msg);
      console.log(raw);
    };
    function changeRaw() {
      raw.content = 'changedRaw'
      console.log(msg);
      console.log(raw);
    };
    return {
      msg,
      changeMsg,
      changeRaw
    };
  }
}
</script>

<style scoped>
button {
  margin: 0 10px;
}
</style>